import React, { useEffect, useState } from 'react';
import RnderCode from '../RenderCode';
import { Collapse, Row, Col, Button } from 'antd';
import CodeEditor from '../CodeEditor';
import { copyCode } from '@/common/utils';
import { CopyOutlined } from '@ant-design/icons';
import { connect, ConnectRC } from 'umi';
const { Panel } = Collapse;

const RenderSQLCode: React.FC<{ code: { create: string, insert: string, index: string } }> = (props) => {

    const [createCode, setCreateCode] = useState('');

    const [insertCode, setInserCode] = useState('');

    const [indexCode, setIndexCode] = useState('');

    useEffect(() => {
        setCreateCode(props.code.create);
        setInserCode(props.code.insert);
        setIndexCode(props.code.index);
    }, [props.code]);

    return <Collapse>
        <Panel key="sql" header={
            <Row>
                <Col span={6}>Sql 创建表语句</Col>
                <Col span={18}>
                    <div style={{ textAlign: 'right' }}>
                        <Button onClick={(e) => copyCode(e, createCode)} icon={<CopyOutlined />}>复制</Button>
                    </div>
                </Col>
            </Row>}>
            <CodeEditor height={200} language='sql' value={createCode} onChange={(value) => setCreateCode(value)}></CodeEditor>
        </Panel>

        <Panel key="insertsql" header={
            <Row>
                <Col span={6}>Sql 插入语句</Col>
                <Col span={18}>
                    <div style={{ textAlign: 'right' }}>
                        <Button onClick={(e) => copyCode(e, insertCode)} icon={<CopyOutlined />}>复制</Button>
                    </div>
                </Col>
            </Row>}>
            <CodeEditor height={400} language='sql' value={insertCode} onChange={(value) => setInserCode(value)}></CodeEditor>
        </Panel>
        <Panel key="indexsql" header={
            <Row>
                <Col span={6}>Sql 索引语句</Col>
                <Col span={18}>
                    <div style={{ textAlign: 'right' }}>
                        <Button onClick={(e) => copyCode(e, indexCode)} icon={<CopyOutlined />}>复制</Button>
                    </div>
                </Col>
            </Row>}>
            <CodeEditor height={400} language='sql' value={indexCode} onChange={(value) => setIndexCode(value)}></CodeEditor>
        </Panel>
    </Collapse>
}

export default RenderSQLCode;
